<template>
  <div class="pd30 ent-container">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>设备管理</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con ent-content">
        <div class="con-row flex flexac pl search-box">
          <!-- <div class="inputLable inputLable1 flex flexac">
            <el-input v-model="queryParam.id" class="input" placeholder="请输入地产品牌ID..." />
          </div> -->
          <div class="inputLable inputLable2 flex flexac">
            <el-input v-model="queryParam.name" class="input" placeholder="请输入设备名称..." />
          </div>
          <div class="groupbtn flex m-l-60 ">
            <div class="selectBtn flex flexac " @click="getEquiList">查询</div>
            <el-button class="emptyBtn flexcenter m-l-25" type="info" @click="handleEmptySearch"><i class="iconfont icon-qingkong" />清空</el-button>
          </div>
        </div>
        <div class="con-row flex flexac flexjcsb pl">
          <el-button class="defaultbtn" type="primary" @click="handleRefresh"><i class="el-icon-refresh" :class="refresh?'goRefresh':''" />刷新</el-button>
          <div class="m-r-25 flex">
            <el-button class="defaultbtn" type="primary" @click="handleAdd"><i class="el-icon-circle-plus-outline" />添加</el-button>
            <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn"><i class="el-icon-delete-solid" />删除</el-button>
            <el-button class="defaultbtn" type="primary" @click="handleExportExcel"><i class="iconfont icon-wenjiandaochu" />导出</el-button>
            <div class="pre m-l-10">
              <el-button class="defaultbtn pre" type="primary" @click="handleSenior('field')"><i class="iconfont icon-shezhi" />字段
              </el-button>
              <div class="selectUl" :class="seniorSet.field?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" :key="i" class="li">
                  <el-checkbox v-model="item.isShow">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <div class="pre m-l-10">
              <el-button class="defaultbtn" type="primary" @click="handleSenior('sortable')"><i class="iconfont icon-shezhi" />排序</el-button>
              <div class="selectUl" :class="seniorSet.sortable ? 'showSelectUl' : 'hideSelectUl'">
                <div v-for="(item,i) in tablehead" v-if="item.isShow" :key="i" class="li">
                  <el-checkbox v-model="item.sortable">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <!-- <el-button class="defaultbtn" @click="handleExportExcel" type="primary"><i class="iconfont icon-shezhi"></i>固定</el-button> -->
          </div>
        </div>

        <el-table id="dataList" ref="dataList" class="con-table ent-table" type="expand" :data="dataList" style="width: 100%" @select="handleCheck" @select-all="handleCheck" @selection-change="handleCheckChange">
          <el-table-column width="50" type="selection" label="全选" />
          <template v-for="item in tablehead">
            <el-table-column v-if="item.isShow" :key="item.index" align="center" :width="item.width" :sortable="item.sortable" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" />
          </template>

          <el-table-column prop="name" label="基本操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button class="defaultbtn" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
                <i class="el-icon-edit" />
                编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="equi-pagetion" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <EquiDialog v-model="visible" :data="editEqui" :is-edit="isEdit" @handleRefresh="handleRefresh" @handleCloseDialog="handleCloseDialog" />
  </div>
</template>

<script>

import EquiDialog from './equiDialog'
import { fetchEquiList, fetchEquiDelete } from '@/api/operation/BOM/opBomEquipment'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  components: { EquiDialog },
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },

      queryParam: {
        // id: '',
        name: ''
      },
      delEnt: '',
      dataList: [],
      visible: false,
      factoryListInfo: [],
      editEqui: {},
      isEdit: false,
      selectDataLength: 0,
      refresh: false,
      seniorSet: {
        'field': false,
        'sortable': false
      },
      tablehead: [
        {
          index: 0,
          prop: 'id',
          label: 'ID',
          width: '60',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'name',
          label: '设备名称',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'remark',
          label: '备注',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getEquiList()
  },
  mounted(){
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/operation/basics/BOM/opBomEquipment/index'}))
  },
  methods: {
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
      }
      if (type === 'sortable') {
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },

    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['设备名称', '备注', '版本号']
        const filterVal = ['name', 'remark', 'version']
        const data = this.formatJson(filterVal, this.dataList)
        export_json_to_excel(tHeader, data, '设备管理列表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleRefresh() {
      this.refresh = true
      this.getEquiList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    getEquiList() {
      const params = {
        // id: this.queryParam.id,
        name: this.queryParam.name,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchEquiList(params).then((res) => {
        if (res.code === '000000') {
          this.factoryListInfo = res
          this.paging.pageSize = res.pager.pageSize
          this.paging.currentPage = res.pager.pageIndex
          this.paging.total = res.pager.totalSize
          this.dataList = res.data
        }
      })
    },
    handleEmptySearch() {
      this.queryParam.id = ''
      this.queryParam.name = ''
      this.getEquiList()
    },
    handleEdit(index, row) {
      this.visible = true
      this.isEdit = true
      this.editEqui = row
    },
    handleAdd() {
      this.visible = true
      this.isEdit = false
      this.editEqui = {
        id: '',
        name: '',
        remark: '',
        version: ''
      }
    },
    /**
   *    单选操作，全选按钮失效操作
   */
    handleCheck(selection, row) {
      this.$refs.dataList.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.delEnt = row
        this.$refs.dataList.toggleRowSelection(row, true)
      }
    },

    /**
   *  取消单选的checkbox
   */
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    handleDeleteBtn() {
      this.$alert('这个操作会删除和它相关联的所有数据,确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: action => {
          if (action === 'confirm') {
            this.handleDelete()
          }
        }
      })
    },
    handleDelete() {
      const selectDataId = this.delEnt.id
      fetchEquiDelete(selectDataId).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '删除成功')
          this.getEquiList()
        }
      })
    },
    handleCloseDialog() {
      this.visible = !this.visible
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getEquiList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getEquiList()
    }
  }
}
</script>

<style lang="scss">
.equi-pagetion {
  display: flex;
  margin: 20px 0 20px 15px;
}

.equi-content {
  display: flex;
  flex-direction: column;
}
</style>
